<template>
  <div class="panel-left-2 common-panpel">
    <div class="angle angle-left-top"></div>
    <div class="angle angle-left-bottom"></div>
    <div class="angle angle-right-top"></div>
    <div class="angle angle-right-bottom"></div>
    <div style="padding: 25px 25px 10px 25px">
      <div class="subTit">
        <img :src="require('@/assets/icon/' + this.cImg)" width="28px" />{{
          cTitle
        }}
      </div>
      <div :id="domId" :style="{ width: '100%', height: vHeight + 'px' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    cTitle: {
      type: String,
      default: "",
    },
    // 标题左侧图片
    cImg: {
      type: String,
      default: "icon-esTrend.png",
    },
    seriesName: {
      type: Array,
      default: () => {
        return ["镇(街道)级", "村(社区)级"];
      },
    },
    vHeight: {
      type: Number,
      default: 0,
    },
    // div ID
    domId: {
      type: String,
      default: "",
    },
    barWidth: {
      type: String,
      default: "11px",
    },
    xRotate: {
      type: Number,
      default: -40,
    },
    barData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      barDataObj: this.barData,
    };
  },
  watch: {
    barDataObj: {
      handler: function (val) {
        this.initCharts();
      },
      deep: true,
      // immediate: true //是否以当前的初始值执行handler的函数
    },
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(document.getElementById(this.domId));
      let option = {
        legend: {
          right: "0%",
          top: "5%",
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 23,
            color: "#ffffff",
          },
        },
        grid: {
          top: "15%",
          left: "0%",
          right: "5%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.barDataObj.xData,
            //xAxis配置 x坐标轴刻度设置
            axisTick: {
              show: false,
            },
            // 设置轴线颜色
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: this.xRotate, // x轴文字倾斜 -25
              textStyle: {
                fontSize: 18,
                color: "#ffffff",
                fontWeight: 700,
              },
              margin: 20,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 3; //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "个",
            nameTextStyle: {
              color: "#fff",
              fontSize: 23,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                fontSize: 22,
                color: "#ffffff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(218, 219, 219, 0.1)",
              },
            },
          },
        ],
        series: [
          {
            name: this.seriesName[0],
            type: "bar",
            data: this.barDataObj.yData1,
            barWidth: this.barWidth,
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#FFBE1E", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#EB4C27", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [4, 4, 0, 0],
              },
            },
          },
          {
            name: this.seriesName[1],
            type: "bar",
            data: this.barDataObj.yData2,
            barWidth: this.barWidth,
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#B034FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4245FA", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [4, 4, 0, 0],
              },
            },
          },
        ],
      };
      if(this.barDataObj.xData.length >0) {
        myChart.setOption(option);
      }
      
    },
  },
  created() {},
  mounted() {
    this.initCharts();
  },
};
</script>
<style lang='scss' scoped>
</style>